import { defineComponent, reactive, ref } from "vue";
import TablePage from "@/components/TablePage/TablePage";
import { tablesInterface } from "@/common/interface/table.interface";
import MenuService from "./index.service";
import StatusTag from "@/components/StatusTag/StatusTag";
import Add from "./Add/Add";
export default defineComponent({
  name: "Index",
  setup() {
    const tablePageRef = ref(null as any);
    // 表格定义
    const tables = reactive({
      list: [
        {
          title: "菜单管理",
          rowKey: "menuId",
          columns: [
            {
              title: "菜单名称",
              dataIndex: "menuName",
              align: "left",
              width: "280px",
            },
            {
              title: "图标",
              dataIndex: "icon",
              align: "center",
              width: "80px",
            },
            {
              title: "排序",
              dataIndex: "orderNum",
              align: "center",
              width: "80px",
            },
            {
              title: "权限标识",
              dataIndex: "perms",
              align: "center",
              width: "180px",
            },
            {
              title: "路由路径",
              dataIndex: "path",
              align: "center",
              width: "240px",
            },
            {
              title: "组件路径",
              dataIndex: "component",
              align: "center",
              width: "240px",
            },
            {
              title: "状态",
              dataIndex: "status",
              align: "center",
              width: "80px",
            },
            {
              title: "创建时间",
              dataIndex: "createTime",
              align: "center",
              width: "200px",
            },
          ],
          toolbar: {
            left: ["refresh", "add"],
            right: ["filter", "search"],
            add: {
              permissions: 'system:menu:add',
              handler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add' });
              }
            },
          },
          searchForm: {
            menuName: {
              type: "input",
              label: "菜单名称",
              attrs: { placeholder: "菜单名称", allowClear: true },
            },
            status: {
              type: "select",
              label: "状态",
              attrs: { placeholder: "状态" },
              datas: [{ label: '正常', value: "0" }, { label: '停用', value: "1" }],
            },
          },
          service: new MenuService(),
          bodyCell: ({ text, record, index, column }) => {
            if (column.dataIndex === 'icon') {
              return <svg-icon name={text} style={{ fontSize: "14px" }} />
            }
            if (column.dataIndex === 'status') {
              return <StatusTag text={text} />
            }
          },
          operation: ({ record }) => [
            {
              type: "add",
              clickHandler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add', parentId: record.menuId });
              }
            },
            {
              type: "edit",
              clickHandler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'edit', menuId: record.menuId });
              }
            },
            {
              type: "delete",
              clickHandler: "delete",
            },
          ],
          popups: [
            {
              ref: "addRef",
              dom: () => <Add onChange={() => { tablePageRef.value.reload(); }} />,
            }
          ],
        }
      ],
    } as tablesInterface)
    // 配置项
    const config = reactive({
      table: tables.list[0],
    })
    return () => (
      <TablePage ref={tablePageRef} config={config} />
    )
  }
})